import 'package:easy_read_comic/controller/comic/detail_controller.dart';
import 'package:easy_read_comic/widgets/auto_image_widget.dart';
import 'package:easy_read_comic/widgets/tag_widget.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:seo_renderer/seo_renderer.dart';

class Detail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: DetailController(),
      builder: (controller) {
        return Scaffold(
          body: Container(
            child: EasyRefresh(
              onLoad: () {
                controller.loadMore();
              },
              onRefresh: () {
                controller.resetLoadMore();
              },
              child: CustomScrollView(
                controller: controller.scrollController,
                slivers: [
                  SliverAppBar(
                    backgroundColor: Colors.white,
                    expandedHeight: 400.0,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Container(
                        color: Colors.white,
                        child: Stack(
                          children: [
                            Container(
                              child: controller.info.SwiperList.isEmpty
                                  ? Center(
                                      child:
                                          LoadingAnimationWidget.discreteCircle(
                                        color: Colors.black,
                                        size: 100,
                                      ),
                                    )
                                  : AutoImage.buildImage(
                                      controller.info.SwiperList[0]),
                              height: 350,
                              width: Get.width,
                            ),
                            Positioned(
                              bottom: 10,
                              left: 20,
                              child: Container(
                                padding: EdgeInsets.all(10),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Container(
                                      padding: EdgeInsets.only(
                                        top: 20,
                                      ),
                                      child: TextRenderer(
                                        child: Text(
                                          controller.info.Title,
                                          style: TextStyle(
                                            fontSize: 25,
                                            color:
                                                Theme.of(context).primaryColor,
                                          ),
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ),
                                    Container(
                                      child: Divider(),
                                      padding: EdgeInsets.only(
                                        left: 10,
                                        right: 130,
                                      ),
                                    ),
                                    Container(
                                      padding: EdgeInsets.only(
                                        left: 10,
                                      ),
                                      height: 100,
                                      child: TextRenderer(
                                        child: Text(
                                          controller.info.Intro.toString(),
                                          overflow: TextOverflow.ellipsis,
                                          maxLines: 5,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                height: 200,
                                width: Get.width / 1.3,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(15),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black26,
                                      blurRadius: 10,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        height: 400,
                      ),
                    ),
                    pinned: true,
                    centerTitle: true,
                    iconTheme:
                        IconThemeData(color: Theme.of(context).primaryColor),
                    title: controller.exceedHeight
                        ? Text(
                            controller.info.Title,
                            style: TextStyle(
                              color: Theme.of(context).primaryColor,
                            ),
                          )
                        : null,
                    actions: [
                      IconButton(
                        onPressed: () {
                          controller.favourite(controller.info.Id);
                        },
                        icon: Icon(
                          Icons.favorite,
                          size: 30,
                          color: controller.info.IsFavourite == 1
                              ? Colors.red
                              : Colors.white,
                        ),
                      ),
                      IconButton(
                        onPressed: () {
                          controller.share();
                        },
                        icon: Icon(
                          Icons.share,
                          size: 30,
                          color: Theme.of(context).primaryColor,
                        ),
                      ),
                    ],
                  ),
                  SliverToBoxAdapter(
                    child: Container(
                      padding: EdgeInsets.all(20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            "章节目录",
                            style: TextStyle(
                              fontSize: 27,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SliverGrid(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Container(
                          child: Stack(
                            children: [
                              FractionallySizedBox(
                                child: Container(
                                  child: ClipRRect(
                                    child: AutoImage.buildImage(
                                      controller.chapterList[index].Thumb
                                          .toString(),
                                      alt: controller.chapterList[index].Title,
                                    ),
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10)),
                                  ),
                                ),
                                widthFactor: 0.9,
                                heightFactor: 0.9,
                              ),
                              if (controller.chapterList[index].IsVip > 0)
                                Positioned(
                                  child: TagWidget(
                                    "会员",
                                    background: Theme.of(context)
                                        .primaryColor
                                        .withOpacity(0.5),
                                    fontColor: Colors.white,
                                  ),
                                  top: 0,
                                  left: 0,
                                ),
                              Positioned(
                                child: Container(
                                  height: 100,
                                  width: 110,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    color: Colors.white,
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.black26,
                                        blurRadius: 5,
                                      ),
                                    ],
                                  ),
                                  child: Container(
                                    child: Column(
                                      children: [
                                        Container(
                                          child: TextRenderer(
                                            child: Text(
                                              controller
                                                  .chapterList[index].Title
                                                  .toString(),
                                              style: TextStyle(
                                                fontSize: 17,
                                              ),
                                            ),
                                          ),
                                        ),
                                        Container(
                                          child: Divider(),
                                          width: 30,
                                        ),
                                        LinkRenderer(
                                          child: GestureDetector(
                                            child: Container(
                                              child: Row(
                                                children: [
                                                  Text("立即阅读"),
                                                  Icon(
                                                    Icons.chevron_right,
                                                  ),
                                                ],
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                              ),
                                            ),
                                            onTap: () => Get.toNamed(
                                              "/read/${controller.chapterList[index].ComicId}/${controller.chapterList[index].Id}",
                                            ),
                                          ),
                                          text: controller
                                              .chapterList[index].Title,
                                          href:
                                              "/read/${controller.chapterList[index].ComicId}/${controller.chapterList[index].Id}",
                                        )
                                      ],
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                    ),
                                    padding: EdgeInsets.all(10),
                                  ),
                                ),
                                bottom: 0,
                                right: 0,
                              ),
                            ],
                          ),
                          margin: EdgeInsets.only(
                            left: 10,
                            right: 10,
                          ),
                          padding: EdgeInsets.zero,
                        );
                      },
                      childCount: controller.chapterList.length,
                    ),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 10.0,
                      mainAxisSpacing: 30.0,
                      childAspectRatio: 0.8,
                    ),
                  ),
                ],
              ),
            ),
            color: Colors.white,
            height: Get.height,
          ),
          floatingActionButton: controller.exceedHeight
              ? FloatingActionButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50),
                  ),
                  foregroundColor: Colors.white,
                  backgroundColor: Theme.of(context).primaryColor,
                  onPressed: () => controller.toTop(),
                  child: Icon(Icons.arrow_upward),
                )
              : null,
        );
      },
    );
  }
}
